<!-- 首页 -->
<template>
  <div class="index">
    <!-- 头部导航 -->
    <Header />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in SwiperImg" :key="index">
        <img :src="baseURL + item.image" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 相关介绍 -->
    <!-- <div class="index_about">
      <div
        class="index_about_item"
        v-for="(item, index) in about"
        :key="index"
        @click="toindexAbout(item)"
      >
        <div class="index_about_item_img">
          <img :src="baseURL + item.image" alt="" />
        </div>
        <div :class="index == 0 ? 'active' : ''" class="index_about_item_name">
          {{ item.title }}
        </div>
      </div>
    </div> -->

    <!-- 公司简介   -->
    <div class="index_about">
      <div class="index_about_title">公司简介</div>
      <div class="index_about_box">
        <div class="index_about_left">
          为响应国家九部委联合开展深入整治互联网和手机媒体淫秽色情及低俗信息专项行动的号召，营造一个健康文明的网络环境，给大家一个和谐积极的家园。
          一、不得上传任何有违国家法律法规的内容。
          二、不得上传具有色情内容的内容。
          三、不得上传内容低俗，格调不高的内容。
          四、不得上传具有色情诱导性内容的内容。
          五、不得在标题、简介和标签中出现任何具有低俗色情含义的字眼。
          六、不含有涉及版权问题的内容。除非有相关证明，觅元素将您视为您在觅元素上传、发布或传输的内容的版权拥有人。
          如果您上传了这些内容，我们将一律予以删除，我们希望我们最珍贵的网友们，理解并监督我们。
          您使用觅元素服务上传、发布或传输内容即代表了您有权且同意在全世界范围内，永久性的、不可撤销的、免费的授予觅元素对该内容的存储、使用、发布、复制、发行、展览、网络传播、修改、改编、出版、翻译、据以创作衍生作品、传播、表演和展示等权利；将内容的全部或部分编入其他任何形式的作品、媒体、技术中的权利；对您的上传、发布的内容进行商业开发的权利；通过有线或无线网络向计算机终端、移动通讯终端（包括但不限于便携式通讯设备如手机和智能平板电脑等）、手持数字影音播放设备、电视接收设备（模拟信号接收设备、数字信号接收设备、数字电视、IPTV、带互联网接入功能的播放设备等）
        </div>
        <div class="index_about_right">
          <img src="../assets/image/rencai.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="footer_top">
        <div class="footer_item">
          <div class="footer_box" v-for="(item, index) in about" :key="index">
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="footer_middle">
        <div class="footer_middle_top">
          <div class="footer_middleTop_font">友情链接:</div>
          <a href="http://www.jd.com">京东</a>
          <a href="http://www.baidu.com">百度</a>
          <a href="http://www.taobao.com">淘宝</a>
        </div>
        <div class="footer_middle_middle">
          Copytight © <a href="">www.zhongchuangzixun.com,</a> 2014.
          中创咨询有限公司 版权所有
        </div>
        <div class="footer_middle_bottom">
          <a href=""
            >地址: 北京朝阳区 北苑路86号院(嘉铭桐城)E区213号楼一致三层
            <a href="https://beian.miit.gov.cn">京ICP备06033816号</a>
            技术支持:中创咨询</a
          >
        </div>
      </div>
      <div class="footer_about">
        <div class="bottom-left">
          <div class="phone icon1">
            <van-icon name="phone-o" color="#afafaf" />
            <span>电话：{{ companyMsg.phone }}</span>
          </div>
          <div class="phone icon2">
            <van-icon name="location-o" color="#afafaf" />
            <span>{{ companyMsg.address }}</span>
          </div>
        </div>
        <div class="bottom_right">
          <img :src="baseURL + companyMsg.codeimage" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import axios from "axios"; // 引入axios
import {
  getBanner,
  getCompany,
  getCompanyMsg,
  getNav,
} from "../api/index/index";
export default {
  name: "Index",
  data() {
    return {
      activeName: "1",
      muneList: [],
      //底部信息
      companyMsg: {},
      //轮播图
      SwiperImg: [],

      about: [],
      // 关于我们
      companyInfo: [],

      baseURL: this.$store.state.baseURL,
    };
  },
  mounted() {
    let vm = this;
    // 轮播图数据
    vm.getSwiperImg();
    // 公司信息
    vm.getCompany();
    //公司中部信息
    vm.getCompanyMsg();
    // 公司导航信息
    vm.getNav();
  },
  methods: {
    // 底部折叠篮跳转
    toreturn(itemChild) {
      this.id = itemChild.id;
      if (this.id == 14 || this.id == 15 || this.id == 16) {
        this.$router.push("/news?id=" + this.id);
      } else if (this.id == 29) {
        this.$router.push("/consultant");
      } else if (this.id == 23 || this.id == 24 || this.id == 25) {
        this.$router.push("/login?id=" + this.id);
      } else if (
        this.id == 20 ||
        this.id == 21 ||
        this.id == 22 ||
        this.id == 30
      ) {
        this.$router.push("/service");
      } else if (this.id == 7) {
        this.$router.push("/index");
      } else {
        this.$router.push("/about?id=" + this.id);
      }
    },
    toindexAbout(item) {
      this.id = item.id;
      if (item.id == 7) {
        location.reload();
      } else {
        this.$router.push("/about?id=" + item.id);
      }
    },
    //轮播图数据
    async getSwiperImg() {
      let vm = this;
      const res = await getBanner();
      vm.SwiperImg = res.data.data;
      console.log(res, "101");
    },
    // 公司信息
    async getCompany() {
      let vm = this;
      const res = await getCompany();
      console.log(res, "公司信息");
      vm.companyMsg = res.data.data;
    },

    async getCompanyMsg() {
      let vm = this;
      const res = await getCompanyMsg();
      console.log(res, "首页中部");
      vm.about = res.data.data;
    },

    //公司导航
    async getNav() {
      let vm = this;
      const res = await getNav();
      vm.muneList = res.data.data;
      console.log(res, "导航信息");
    },
  },
};
</script>
<style lang="less" scoped>
// footer
@import url("../assets/css/footer.css");
// 相关介绍
@import url("../assets/css/jieshao.css");
.my-swipe .van-swipe-item {
  img {
    width: 100%;
    height: 180px;
  }
}
</style>